<template>
    <p>品牌的名称：{{ obj.name }}</p>
    <p>品牌的价格：{{ obj.price }}</p>
    <p>品牌厂家：{{ obj.brand.name }}</p>
    <p>购买数量：{{ count }}</p>
    <button @click="updateName">修改品牌名</button>
    <button @click="updatebrand">修改厂家名</button>
    <button @click="count++">增加购买数量</button>
</template>
<script>
import { reactive , ref, watch } from 'vue';

export default {
    setup() {

        const count=ref(2)

        const obj = reactive({
            name: '辉腾',
            price: 18.8,
            brand: {
                id: 101,
                name: "上海大众"
            }
        })

        const updateName = () => { 
            obj.name='奥迪'
        }

        const updatebrand = () => { 
            obj.brand.name='进口奥迪'
        }
        //侦听一个reactive 的数据 
        watch(obj, (newValue) => { 
            console.log("监听的数据发生改变",newValue);
        })

        // watch(() => obj.brand, () => {
        //     console.log("obj.brand 发生改变了。。。。");
        // },
        //     {
        //         deep: true, //深度监听
        //         immediate: true //立即触发
        // })
            // 监听多个数据
        // watch([count, obj.brand], () => { 
        //     console.log("多个数据发生改变");
        // })
        
        watch(() => obj.brand.name, () => { 
            console.log("只针对一个厂家。。。");
        })

        return {
            obj, updateName, updatebrand, count
        }
}
    
}

</script>